<template>
	<view class="beijingse">
		<u-popup :show="show" @close="show=false" :safeAreaInsetBottom="false" mode="center" :round="10">
			<view class="mainpadding">
				<view class="sanshier textcenter fonweight zhonghei">发货</view>
				<view class="flexbetween margin_top5">
					<view class="ershib zhonghei margin_right">快递公司</view>
					<input type="text" placeholder="请输入" style="width: 60%;" v-model="express_name">
				</view>
				<view class="flexbetween margin_top5">
					<view class="ershib zhonghei margin_right">快递单号</view>
					<input type="text" placeholder="请输入" style="width: 60%;" v-model="express_no">
				</view>
				<view class="flexbetween margin_top5">
					<view class="qxdtn flexcenter margin_right" @click="show=false">取消</view>
					<view class="qubtn flexcenter" @click="fahuo(currentid)">确认</view>
				</view>
			</view>
		</u-popup>
		<view class="ffffff">
			<u-tabs :list="list1" lineColor="#FF9341" @click="changetab" :current="tabsid" :activeStyle="{
				    color: '#000000',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				            color: '#666666',
							fontWeight: '500',
				            transform: 'scale(1)'
				        }" ></u-tabs>
		</view>
		<view class="mainpadding2">
			<!-- state 1=待支付,2=待发货,3=待收货,4=待评论,5=售后订单(已弃用),6=已完成,7=已取消,8=取消审核中 -->
			<!-- buy_type 1=实物商品,2=虚拟商品 -->
			<!-- order_type 1到店自提，2物流配送 -->
			<view class="ffffff radius margin_top mainpadding" v-for="item in list.data" :key="item.id" @click="tzddxq(item.id)">
				<view class="flexbetween">
					<view class="ershiba zhonghei">订单编号：{{item.order_no}}</view>
					<view class="ershiba xiaohong" v-if="item.state==1">待支付</view>
					<view class="ershiba zhonghei" v-if="item.pt_status==10">待分享</view>
					<template v-else>
						<view class="ershiba zhonghei" v-if="item.state==2 && item.order_type==2">待发货</view>
						<view class="ershiba zhonghei" v-if="item.state==2 && item.order_type==1">待备货</view>
					</template>
					<view class="ershiba xiaocheng" v-if="item.state==3 && item.buy_type==2">待核销</view>
					<view class="ershiba xiaocheng" v-if="item.state==3 && item.buy_type==1">待收货</view>
					<view class="ershiba xiaolv"  v-if="item.state==4">待评价</view>
					<view class="ershiba xiaolv"  v-if="item.state==6">已完成</view>
					<view class="ershiba xiaohui" v-if="item.state==7">已取消</view>
				</view>
				<view class="xiahuaxian">
					<view class="flexbetween margin_top " v-for="ite in item.goods" :key="ite.id">
						<image class="sptp" :src="ite.image_text" mode=""></image>
						<view class="" style="width: 77%;">
							<view class="ershiba xiaohei yhxk">{{ite.title}}</view>
							<view class="flexbetween margin_top4">
								<view class="titletext xiaohong fonweight">¥{{ite.actual_payment}}</view>
								<view class="ershil xiaocheng">x{{ite.number}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="strongtext xiaohei margin_top textright">共计{{item.goods_num}}件商品 合计
					<text class="xiaocheng titletext nofonweight">￥{{item.pay_price}}</text>
				</view>
				<view class="flexright margin_top">
					<view class="xhbtn flexcenter" v-if="item.state==2 && item.order_type==1" @click.stop="beihuo(item.id)">立即备货</view>
					<view class="xhbtn flexcenter" v-if="item.state==2 && item.order_type==2" @click.stop="currentid=item.id;show=true">立即发货</view>
					<view class="xhbtn flexcenter" v-if="item.state==3 && item.buy_type==2" @click.stop="hexiao(item.hx_code)">核销订单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")

	export default {
		data() {
			return {
				list1: [{
						name: '全部',
						value: 0,
					},
					{
						name: '待发货',
						value: 1,
					}, {
						name: '待核销',
						value: 2,
					},
					{
						name: '待评价',
						value: 3,
					},
					{
						name: '已取消',
						value: 4,
					}, {
						name: '已完成',
						value: 5,
					}
				],
				tabsid: 0,
				show: false,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				shop_id:"",
				currentid:"",
				express_no:"",
				express_name:"",
			}
		},
		onLoad(option) {
			let _this = this
			this.tabsid = option.i
			this.shop_id = option.id
		},
		onShow() {
			this.init()
		},
		methods: {
			beihuo(id) {
				httpRequest.modal('提示', '是否对当前订单进行备货操作', true, (resp) => {
					if (resp) {
						httpRequest.request('/api/shopcl/orderBh', 'GET', {
							order_id: id,
							shop_id:this.shop_id
						}).then(res => {
							httpRequest.toast(res.msg)
							if(res.code==1){
								this.init()
							}
						})
					}
				})
			},
			fahuo(id){
				if(this.express_name==""){
					httpRequest.toast("请输入快递公司名称")
					return false
				}
				if(this.express_no==""){
					httpRequest.toast("请输入快递单号")
					return false
				}
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request('/api/shopcl/orderFh', 'GET', {
					order_id: id,
					express_name:this.express_name,
					express_no:this.express_no,
				}).then(res => {
					uni.hideLoading()
					this.show=false
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.express_name = ""
						this.express_no = ""
						this.init()
					}
				})
			},
			hexiao(hx_code){
				uni.navigateTo({
					url:"/pages_wode/heixiao?hx_code="+hx_code
				})
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					state: this.tabsid,
					shop_id:this.shop_id
				}
				let url = '/api/shopcl/shopOrderIndex'
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			changetab(e){
				this.tabsid = e.index
				this.init()
			},
			close() {
				this.show = false
			},
			// 跳转订单详情
			tzddxq(id) {
				uni.navigateTo({
					url: '/pages_wode/dianpuddxq?shop_id='+this.shop_id+"&id="+id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.qubtn {
		width: 265rpx;
		height: 81rpx;
		background-color: #FF9341;
		border: 1rpx solid #FF9341;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		border-radius: 51rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.qxdtn {
		width: 265rpx;
		height: 81rpx;
		border: 1rpx solid #FF9341;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		border-radius: 51rpx;
		font-weight: 500;
		color: #FF9341;
	}

	.textarea {
		height: 372rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		box-sizing: border-box;
		width: 100%;
		padding: 30rpx;
		border: 1rpx solid #DFDFDF;
	}

	.ztxhx {
		text-decoration: underline;
	}

	.hxewm {
		width: 251rpx;
		height: 251rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.hxbox {
		background-size: 100% 100%;
		background-image: url('@/static/images/system/hxm.png');
		padding: 140rpx 36rpx 30rpx;
		box-sizing: border-box;
	}

	.henhbtn {
		width: 420rpx;
		height: 81rpx;
		background-color: #FF9341;
		border-radius: 120rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.wulbox1 {
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 1rpx solid #DFDFDF;
		width: 471rpx;
		height: 74rpx;
	}

	.wulbox {
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 1rpx solid #DFDFDF;
		width: 600rpx;
		height: 158rpx;
	}

	.xhbtn {
		width: 170rpx;
		height: 67rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
		border-radius: 120rpx;
		border: 2rpx solid #FF9341;
	}

	.qxbtn {
		width: 170rpx;
		height: 67rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #666666;
		border-radius: 120rpx;
		border: 2rpx solid #666666;
	}

	.sptp {
		width: 124rpx;
		height: 124rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}
</style>